<template>
  <div class="article-list-body container" :style="{ width: 1200 + 'px' }">
    <div v-loading.fullscreen.lock="loading" class="content">
      <h1 style="text-align: center">{{ notice?.title }}</h1>
      <div class="author">
        <span>{{ notice?.authorName }}</span>
        <span>
          {{
            notice?.created
              ? moment(notice?.created).format("YYYY-MM-DD HH:mm:ss")
              : ""
          }}
        </span>
      </div>
      <Editor readOnly :modelValue="notice?.content" />
    </div>
  </div>
</template>
  
  <script setup>
import { onMounted, ref, getCurrentInstance, watch } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { getOneNotice } from "@/api/article";

const store = useStore();
const router = useRouter();
const route = useRoute();
import Editor from "@/components/Editor/index.vue";
import moment from "moment";

const notice = ref({});
watch(
  () => route.query.id,
  (val, oldval) => {
    if (val != oldval) {
      getOneNotice(val).then((res) => {
        notice.value = res.data;
      });
    }
  }
);
const getOne = () => {
  getOneNotice(route.query.id).then((res) => {
    notice.value = res.data;
  });
};
onMounted(async () => {
  getOne();
});
</script>
  
  <style lang="scss" scoped>
.container {
  padding: 20px;
  box-sizing: border-box;
  background: white;
  .author {
    text-align: center;
    margin: 20px 0;
    color: gray;
    span {
      margin: 0 15px;
    }
  }
  .bottom {
    position: relative;
    z-index: 10;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 17px 24px;
    height: 64px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    -webkit-box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.06);
    box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.06);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    color: rgb(153, 154, 170);
    .left {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
  .list {
    display: flex;
    .text {
      margin-left: 10px;
      margin-bottom: 30px;
      & div:nth-child(1) {
        color: #777888;
        margin-bottom: 5px;
      }
      & div:nth-child(2) {
        width: 490px;
        line-height: 30px;
        word-wrap: break-word;
      }
    }
  }
}
.commit {
  display: flex;
  margin-bottom: 30px;
  gap: 10px;
  position: relative;
  .btn {
    position: absolute;
    left: 60px;
    bottom: 10px;
  }
}
::v-deep .el-drawer__header {
  border-bottom: 1px solid #e8e8ed;
  padding-bottom: 20px;
  margin-bottom: 0 !important;
}
::v-deep .editor {
  border: none;
}
::v-deep .ql-container.ql-snow {
  border: none;
  font-size: 30px;
}
</style>